<template>
  <div class="body">
    <div class="alert">
      <i class="el-icon-info"></i> 共{{ formSize.total }}条记录
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      :header-cell-style="{
        background: '#fafafa',
        color: '#909399',
        borderBottom: '2px #ccc solid',
      }"
    >
      <el-table-column prop="type" label="操作类型" />
      <el-table-column prop="author" label="操作人" />
      <el-table-column prop="title" label="执行结果" />
      <el-table-column prop="display_time" label="操作时间" />
      <el-table-column prop="pageviews" label="描述" />
    </el-table>
    <pageTool
      class="under"
      @pageSizeChange="pageSizeChange"
      @pageChange="pageChange"
      :total="formSize.total"
      :paginationPagesize="formSize.paginationPagesize"
    />
  </div>
</template>

<script>
import { randoms } from '@/api/hmmm/tags.js'
import pageTool from '../components/page-tool.vue'
export default {
  components: {
    pageTool
  },
  data () {
    return {
      tableData: [],
      formSize: {
        // 所有的数据个数
        total: '',
        // 每一页显示的个数
        paginationPagesize: '20'
      },
      pageSize: {
        index: '',
        pagesize: ''
      },
      loading: false
    }
  },
  async created () {
    this.getList()
  },
  methods: {
    async getList () {
      this.loading = true
      console.log(this.pageSize)
      const { data } = await randoms(this.pageSize)

      console.log(data)
      this.formSize.total = data.total
      this.tableData = data.items
      this.loading = false
    },
    // 进入某一页
    pageChange (pageNum) {
      this.pageSize.index = pageNum
      this.getList()
    },
    // 每页显示的页数
    pageSizeChange (pageSize) {
      // console.log(pageSize)
      this.pageSize.pagesize = pageSize
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
.body {
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
  margin: 10px 20px;
  background-color: #fff;
  color: #303133;
  .alert {
    height: 35px;
    width: 100%;
    padding-left: 16px;
    margin: 0 0 15px;
    border-radius: 3px;
    background-color: #f4f4f4;
    line-height: 35px;
    color: #909399;
    font-size: 13px;
  }
}
</style>
